<!doctype html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>detail</title>
		<meta name="description" content="" />
		<meta name="keywords" content="" />
		<link rel="stylesheet" type="text/css" href="statics/css/index.css" th:href="@{/statics/css/index.css}" media="all" />
		<link rel="stylesheet" type="text/css" href="statics/css/detail.css" th:href="@{/statics/css/detail.css}" />
		<link rel="stylesheet" href="editor/css/style.css" th:href="@{/editor/css/style.css}" />
		<link rel="stylesheet" href="editor/css/editormd.preview.css" th:href="@{/editor/css/editormd.preview.css}" />
		<script src="/editor/jquery.min.js" th:src="@{/editor/jquery.min.js}"></script>
		<script src="editor/lib/marked.min.js" th:src="@{/editor/lib/marked.min.js}"></script>
		<script src="editor/lib/prettify.min.js" th:src="@{/editor/lib/prettify.min.js}"></script>
		<script src="editor/lib/raphael.min.js" th:src="@{/editor/lib/raphael.min.js}"></script>
		<script src="editor/lib/underscore.min.js" th:src="@{/editor/lib/underscore.min.js}"></script>
		<script src="editor/lib/sequence-diagram.min.js" th:src="@{/editor/lib/sequence-diagram.min.js}"></script>
		<script src="editor/lib/flowchart.min.js" th:src="@{/editor/lib/flowchart.min.js}"></script>
		<script src="editor/lib/jquery.flowchart.min.js" th:src="@{/editor/lib/jquery.flowchart.min.js}"></script>
		<script src="editor/editormd.min.js" th:src="@{/editor/editormd.min.js}"></script>
		<script src="editor/editormd.js" th:src="@{/editor/editormd.js}"></script>
	</head>

	<body class="home blog custom-background round-avatars" itemscope itemtype="http://schema.org/Organization">
	<div th:replace="~{common/rept2::sider2}"></div>
	<div th:replace="~{common/repitation::header}"></div>
		<div id="main" class="content">
			<div class="container">
				<article id="post-1202" class="js-gallery post-1202 post type-post status-publish format-standard has-post-thumbnail hentry category-uncategorized tag-11 tag-22 tag-29">
					<style>
						.container {
							padding: 10px 0px;
						}
						
						.post {
							margin: 0 auto
						}
					</style>
					<section class="post_content">
						<header class="post_header">
							<h1 class="post_title" th:text="${artdet.editorTitle}">给大家介绍一下</h1>
						</header>
						<div id="test-editormd-view">
                <textarea id="append-test" style="display:none;" th:text="${artdet.editormd}">

</textarea>
						</div>


						<div class="meta split split--responsive cf">
							<div class="split__title">
								<time datetime="2017-10-02 01:44" th:text="${#dates.format(artdet.editorDate,'yyyy/MM/dd')}">2017/10/02</time>
								<span class=""><a href="" rel="tag">主题</a><a href="" rel="tag">日常</a><a href="" rel="tag">更新</a> </span>
							</div>
							<div id="social-share"><span class="entypo-share"><i class="iconfont">&#xe614;</i>分享</span></div>
							<div class="slide">
								<a class="btn-slide" title="switch down"><i class="iconfont">&#xe615;</i>折叠评论区</a>
							</div>
						</div>
					</section>
				</article>
			</div>
			<svg id="upTriangleColor" width="100%" height="40" viewBox="0 0 100 102" preserveAspectRatio="none">
				<path d="M0 0 L50 100 L100 0 Z"></path>
			</svg>
			<div id="social">
				<ul>
					<li>
						<a href="" title="qzone" target="_blank"><i class="iconfont">&#xe67f;</i></a>
					</li>
					<li>
						<a href="" title="weibo" target="_blank"><i class="iconfont">&#xe680;</i></a>
					</li>
					<li>
						<a href="" title="douban" target="_blank"><i class="iconfont">&#xe681;</i></a>
					</li>
					<li>
						<a href="" title="twitter" target="_blank"><i class="iconfont">&#xe683;</i></a>
					</li>
				</ul>
			</div>
			<div id="panel">
				<div class="comment-area">
					<section class="comments">
						<div class="comments-main">
							<div id="comments-list-title">评论区 </div>
							<ul class="commentwrap">
								<li class="comment even thread-even depth-1" id="li-comment-">
									<div id="comment-969" class="comment_body contents" th:each="comment:${comments}">
										<div class="profile">
											<a href=""><img src="statics/images/9cc50a9e422fb1c89aebafeb959cef7a.jpg" th:src="@{/statics/images/9cc50a9e422fb1c89aebafeb959cef7a.jpg}" class="gravatar" ></a>
										</div>
										<div class="main shadow">
											<div class="commentinfo">
												<section class="commeta">
													<div class="shang">
														<h4 class="author"><a href="" target="_blank" th:text="${comment.visitorNickname}">小布丁</a></h4>
													</div>
												</section>
											</div>
											<div class="body">
												<p th:text="${comment.visitorComments}">挺好的</p>
											</div>
											<div class="xia info">
												<span><time datetime="2018-03-09" th:text="${#dates.format(comment.visitorDate,'yyyy/MM/dd')}">2018年3月9日</time></span>
												<span><a  href=""  >回复</a></span>
												<form th:action="@{/main/detail/}+${artdet.id}" method="post">
												<input type="hidden" name="_method" value="delete">
													<input type="hidden" name="commentsId" th:value="${comment.commentsId}">

													<button >删除</button></form>
												</form>

											</div>
										</div>
									</div>
								</li>

							</ul>
							<!--							分页-->
							<div class="pagination js-pagination">
								<div class="js-next pagination__load">
									<script type="text/javascript" th:src="@{/jquery.min.js}"></script>
									<style>
										a{cursor:pointer;}
										a:hover{color:green;}
										a.active{color:red;}
									</style>
									<a name="pageNum" class="allpage"><b th:text="'共 '+ ${pages.getTotalPages()}+ ' 页'"></b></a>
									<a  th:if="${pages.hasPrevious()} == true" th:href="@{${artdet.id}(currentPage=${pages.previousPageable().getPageNumber()})}"  >上一页</a>
									<a name="pageNum" th:href="@{${artdet.id}(currentPage=${i})}"  th:each="i :${#numbers.sequence(0, pages.getTotalPages()-1)}" th:text="${i+1}" th:class="${pages.getNumber()==i}?'active'" th:if="${i}<3" ></a>
									<a th:text="..."  th:if="${pages.getTotalPages()}>2"></a>
									<a th:text="${pages.getNumber()+1}" th:class="active" th:if="${pages.getNumber()}>2"></a>


									&nbsp;&nbsp;<a name="pageNum" th:if="${pages.hasNext()} == true"  th:href="@{${artdet.id}(currentPage=${pages.nextPageable().getPageNumber()})}" >下一页</a>
									&nbsp;&nbsp;<a th:href="@{${artdet.id}(currentPage=${pages.getTotalPages()-1})}" >尾页</a>
									<script>
										$("a").click(function(){
											$(this).addClass("active").siblings().removeClass("active");
										})
									</script>
								</div>
							</div>
							<div id="respond" class="comment-respond">
								<h6 id="replytitle" class="comment-reply-title"><a rel="nofollow" id="cancel-comment-reply-link" href="" style="display:none;">取消</a></h6>
								<form th:action="@{/main/detail/}+${artdet.id}" method="post"  id="commentform" class="clearfix">
									<div class="clearfix"></div>
									<div class="author-info">
										<input type="hidden" name="editorId" th:value="${artdet.id}">
										<input type="text" name="visitorNickname" id="author" placeholder="昵  称 : " value="" tabindex="1" title="Name (required)" required=""/>
										<input type="text" name="visitorEmail" id="email" placeholder="邮  箱 : " value="" tabindex="2" title="E-mail(will not be published) required" required="" />
										<input type="date" name="visitorDate" placeholder="日 期 : " value="" required=""/>

									</div>
									<div class="clearfix"></div>

									<div class="comment-form-info">
										<div class="real-time-gravatar"> <img id="real-time-gravatar" src="statics/images/d41d8cd98f00b204e9800998ecf8427e.png" th:src="@{/statics/images/d41d8cd98f00b204e9800998ecf8427e.png}" alt="gravatar头像" />
										</div>
										<p class="input-row">
											<i class="row-icon"></i>
											<textarea class="text_area" rows="3" cols="80" name="visitorComments" id="comment" tabindex="4" placeholder="你不说两句吗？(°∀°)ﾉ……"></textarea>
											<input type="submit" name="submit" class="button" id="submit" tabindex="5" value="发送" />
										</p>
									</div>
								</form>
							</div>
						</div>
					</section>
				</div>
			</div>
			<svg id="dwTriangleColor" width="100%" height="40" viewBox="0 0 100 102" preserveAspectRatio="none">
				<path d="M0 0 L50 100 L100 0 Z"></path>
			</svg>
			<div class="wrapper">
			</div>
		</div>

		<div class="p-header">
			<figure class="p-image" style="background-image: url(/statics/images/47fb3c_9afed6c259f94589881bd55376206366mv2_d_3840_5784_s_4_2.jpg);"></figure>
		</div>
	<div class="navpost-part">
		<div id="NextPrevPosts">
			<div class="prev" data-aos="slide-right" data-aos-delay="1.5s">
				<div class="arrow"><i class="iconfont">&#xe625;</i></div>
				<div class="preview">
					<div class="pull-left featuredImg" style="background-image:url('/statics/images/qian.jpeg');"></div>
					<a class="pull-left preview-content bold" th:href="@{/main/detail/}+${next.id}"><span>[[${next.editorTitle}]]</span></a>

				</div>
			</div>
			<div class="next" data-aos="slide-left" data-aos-delay="1.5s">
				<div class="arrow"><i class="iconfont">&#xe623;</i></div>
				<div class="preview">
					<div class="pull-right featuredImg"   style="background-image:url('/statics/images/xia.jpeg');"></div>
					<a class="pull-right preview-content bold" th:href="@{/main/detail/}+${pre.id}"><span>[[${pre.editorTitle}]]</span></a>
				</div>
			</div>
		</div>
	</div>

	<div th:replace="~{common/repitation::footer}"></div>
	<script type="text/javascript">
		$(function() {
			var testEditormdView, testEditormdView2;
			testEditormdView2 = editormd.markdownToHTML("test-editormd-view", {
				htmlDecode      : "style,script,iframe",  // you can filter tags decode
				emoji           : true,
				taskList        : true,
				tex             : true,  // 默认不解析
				flowChart       : true,  // 默认不解析
				sequenceDiagram : true,  // 默认不解析
			});
		});
	</script>
	</body>

</html>